Ext.ns('Edk.attachment.action', 'Edk.attachment.uploadWin');

Edk.attachment.action = {
	// 上传的动作。每执行一次upload action，创建一次uploadWin的对话框。
	// 换句话说，每个formPanel可以对应多个上传对话框为formPanel服务。
	// this = formPanel
	upload:	{
		 text     : '上传图片'
		,iconCls  : 'icon16-attachment'
		,handler  : function(btn){ // btn是按钮对象
			new Edk.attachment.uploadWin({
				 formPanel_ID  : this
				,animateTarget : btn.getEl()
			}).show();
		}
	}
	,del:{}
	
	/**
	 * 当文件上传成功后，调用该finish函数执行。该方法的调用者是服务端返回的字符串parent.window.Edk.attachment.action.finish
	 */
	,finish: function(sessionId, recordId){
		var 
			uploadDialog = Ext.getCmp(sessionId)
			recordPanel = Ext.getCmp(recordId);
			
		uploadDialog.buttons[0].enable();
		uploadDialog.reset();
		// msgs类型为数组，保存了成功上传的文件列表（由服务端返回）
		var msgs = Array.prototype.slice.call(arguments, 2);
		
		if(msgs.length && msgs.length < 3){
			if(msgs.length==1){
				Ext.feedback.msg('已上传文件列表：', msgs[0]);
			}else{
				Ext.feedback.msg('已上传文件列表：', [msgs[0], msgs[1]].join('<br />'));
			}
		}
		if(msgs.length >= 3){
			Ext.feedback.msg('已上传文件列表：', [msgs[0], msgs[1]].join('<br />'));
			Ext.feedback.msg('已上传文件列表：', [msgs[2], msgs[3], msgs[4]].join('<Br />'));
		}
		
		// 必须setTimeout延时图片插入
		var 
			 focusEl    = recordPanel.formEl.child('input[name=title]').dom
			,htmlEditor = recordPanel.htmlEditor
			,i          = 10;
			
		if(uploadDialog.isLightBox){
			htmlEditor.relayCmd("InsertParagraph","a"+String(Math.random()).replace(/[^0-9]/g, '').substr(1, 8));
		}
		
		$$.every(msgs, function(imgURL_str){
			i += 200;
			
			setTimeout(function(){
				if(uploadDialog.isLightBox){
					var lightboxImg = '<a href="{0}" rel="lightbox"><img src="{0}" /></a>'.format(imgURL_str);
					htmlEditor.insertAtCursor(lightboxImg);
					htmlEditor.relayCmd("InsertParagraph","a"+String(Math.random()).replace(/[^0-9]/g, '').substr(1, 8));
				}else{
					focusEl.focus();
					htmlEditor.insertAtCursor('<br />');
					htmlEditor.relayCmd("insertimage", imgURL_str);
				}
			}, i);
		});
	}
};

/**
 * @class Edk.uploadWin
 * @extends Ext.Window
 * 创建一个无刷新的文件上传的对话框。每次最多可以支持五份文件同时上传，并支持选取图片的预览。
 */
Edk.attachment.uploadWin = Ext.extend(Ext.Window, {
	 width       : 450
	,height      : 230
	,bodyStyle   : 'padding:10px;'
	,title       : '附件上传'
	,iconCls     : 'icon16-attachment'
	,minimizable : true
	// 是否插入到HTMLEditor的时候，附加为Lightbox效果准备的代码
	,isLightBox  : true
	,html: {
		tag:'table'
		,width:'40%'
		,cellspacing:10
		,children: {
			tag:'tr'
			,children:[
				{
					tag:'td'
					,children:{
						 tag     : 'form'
						,enctype : 'multipart/form-data'
						,method  : "post"
						,action  : "default.asp"
						,target  : 'Edk-upload-Iframe' // 必须指定以配合iframe无刷新上传
						,children: [
							 {tag: 'input', type: 'file', name: 'f1', style:'margin-bottom:5px;margin-right:8px;'}
							,{tag:'br'}
							,{tag: 'input', type: 'file', name: 'f2', style:'margin-bottom:5px;margin-right:8px;'}
							,{tag:'br'}
							,{tag: 'input', type: 'file', name: 'f3', style:'margin-bottom:5px;margin-right:8px;'}
							,{tag:'br'}
							,{tag: 'input', type: 'file', name: 'f4', style:'margin-bottom:5px;margin-right:8px;'}
							,{tag:'br'}
							,{tag: 'input', type: 'file', name: 'f5', style:'margin-bottom:5px;margin-right:8px;'}
						]
					}
				}
				,{
					 tag:'td'
					,children:{
						 tag:'fieldset'
						,children:[
							{
								 tag: 'legend'
								,html:'图片预览'
							}
							,{
				 				tag:'img'
								,cls: 'perviewImg'
								,src:Edk.BLANK_IMAGE_URL
								,width:150
								,height:70
								,vspace:5
								,hspace:5
							}
						]
					}
				}
			]
		}
	}
	,buttons:[
		{
			 text: '上传'
			,iconCls: 'icon16-attachment'
			,handler: function(btn){
				var  
					 uploadDialog = btn.ownerCt.ownerCt
					,formPanelID  = uploadDialog.formPanel_ID
					,formEl       = uploadDialog.getEl().child('form')
					,hasBol       = true;
					
				// 先表单验证一下，没有选择文件不予上传。
				formEl.select('input[type=file]').each(function(inputEl){
					if(inputEl.dom.value)hasBol = false;
				});
				if(hasBol === true){
					Ext.Msg.alert(Edk.config.appStr, '没有选择本地文件上传！');
					return false;
				}
				if(formEl.dom.action.indexOf('sessionId') == -1){
					// action=upload代表此次动作是文件上传
					// sessionId是此次上传“会话”的有效凭据（formPanelID）；
					// recordId就是当成功上传文件后，图片被插入哪一个Tab
					// （每个Tab在渲染生成的时候有对应的recordId分配，即就是formPanelID）
					formEl.dom.action += '?action=upload&sessionId={0}&recordId={1}'.format(uploadDialog.id, formPanelID); // 只登记一次
				}
				btn.disable(); // 正在上传的话，“上传”按钮无效
				formEl.dom.submit(); // 正式上传
			}
		}
		,{
   			 text: '关闭'
			,handler:function(btn){
				btn.ownerCt.ownerCt.close();
			}
		}
	]
	// afterRender是标准Ext组件渲染后执行的事件。
	,afterRender: function(el){
		Edk.attachment.uploadWin.superclass.afterRender.call(this, el);
		var el = this.getEl();
		setTimeout(function(){
			var perviewImg = el.child('img.perviewImg'); 
			// 每当用户鼠标移到每一个input的时候，随之会有预览图的效果出来
			// 告诉用户他（她）刚才选择了什么图片。
			// 注意，由于FireFox基于安全的原因，预览本地的图片的功能是禁止的。所以只在IE上有效。
			el.select('input[type=file]').on('mouseover', function(event, el){
				if(el.value){
					perviewImg.dom.src = el.value;
					// setImgSize()是调整图片尺寸大小的函数
					Edk.pageFunction.prototype.setImgSize(perviewImg.dom, 150, 70);
				}
			}, perviewImg);
		},500);
		
		/*
		 * 创建一个隐藏的iframe元素，目的是“无刷新"地进行文件上传。
		 * iframe是怎么可以“无刷新”页面上传呢？
		 * 就是依靠form的target属性，这个属性是和a元素的target属性一样的，指定一个目标供下一步操作用。
		 * 现在form元素指定了，就会把文件上传跟这个iframe联系起来，iframe可以将表单上传的数据准确地发送到后台地址。
		 * iframe元素不用指定form的action地址的了。 
		 */
		var idStr = 'Edk-upload-Iframe';
		if(!Ext.fly(idStr)){
			Ext.fly(document.body).createChild({
				 id   : idStr
				,name : idStr
				,tag  : 'iframe'
				,cls  : 'hide'  // 注意是隐藏的，不让用户看到。
			});
		}
	}
	
	/**
	 * 复位的函数，IE6怎么没效果？
	 */
	,reset: function(){
		var el = this.getEl();
		el.child('img.perviewImg').dom.src = Edk.BLANK_IMAGE_URL;
		el.select('input[type=file]').each(function(inputEl){
			inputEl.dom.value = ''; //@todo ie6 no change？
		});
	}
});